<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="24">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submit()">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">
          上级菜单
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-tree-select style="width: 250px"
                          nzPlaceHolder="请选择"
                          [nzDropdownMatchSelectWidth]="true"
                          [nzDropdownStyle]="{ 'max-height': '300px' }"
                          formControlName="pid"
                          [nzNodes]="searchOptions"
                          [nzAsyncData]="true"
                          (nzExpandChange)="onExpandChange($event)">
          </nz-tree-select>

        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">分类名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input [nzSize]="'large'" formControlName="knowledgeName" maxlength="100" nz-input>
          <nz-form-explain
            *ngIf="validateForm.get('knowledgeName').dirty && validateForm.get('knowledgeName').errors || validateForm.get('knowledgeName').pending ">
            <ng-container *ngIf="validateForm.get('knowledgeName').hasError('required')">
              名称不能为空
            </ng-container>
            <ng-container *ngIf="validateForm.get('knowledgeName').pending">
              正在校验...
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
  </div>
</div>

